<template>
   <div class="text-box">
     <h3> 这是自定义组件 Test ---- {{username}}</h3>
     <button @click="changeName" >修改用户名</button>

   </div>
</template>

<script>
// 默认导出,这是固定写法
export default {
  // 数据源
  // 注意: .vue 组件中的 data 不能像之前一样,不能指向对象
  // 注意: 组件中的 data 必须是一个函数
  data(){
    // 这个 return 出去的 {} 中,可以定义数据
    return {
      username: 'admin',
    }
  },
  methods:{
    changeName(){
      // 在组件中,this 就表示当前组件的实例对象
      console.log(this)
      this.username = 'zhongli'
    }

  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  // 过滤器
  filters: {

  }
}
</script>

<style lang="less">
.text-box{
  background-color: aqua;
  h3 {
    color: red;
  }
}
</style>